<!DOCTYPE html>
<html lang="en">
    <head>
        {include file="common/meta_new" /}
        <script src="/assets/js2/layer.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/css/changePasswordPage.css">
    </head>
    <body class="FF">
        <div id="app" class="change-password-page">
            <!-- header -->
            <div class="header">
                <div class="header-height"></div>
                <div class="header-wrap">
                    <div class="header-content">
                        <div class="left">
                            <a href="{:url('index/user/index');}"><div class="go-back"><img src="/static/images/go-back.png" alt=""></div></a>
                            <div class="text">修改密码</div>
                        </div>
                        <div class="title"></div>
                    </div>
                </div>
            </div>

            <div class="tabBox">
                <div class="tab tab-act" onclick="choiceTab(this, 0)">
                    <div>登陆密码</div>
                    <img src="/static/images/dots-act.png" alt="">
                </div>
<!--                <div class="tab" onclick="choiceTab(this, 1)">
                    <div>支付密码</div>
                    <img src="/static/images/dots-act.png" alt="">
                </div>-->
                <input type="hidden" id="type" value="0">
            </div>

            <div class="inputBox">
                <input id="oldPassword" type="password" placeholder="旧密码">
                <img id="oldEye1" onclick="usedEyeShow()" src="/static/images/password-eye.png" style="cursor: pointer;" alt="">
                <img id="oldEye2" onclick="usedEyeShow()" src="/static/images/password-no-eye.png" style="display: none; cursor: pointer;" alt="">
            </div>

            <div class="inputBox">
                <input id="newPassword" type="password" placeholder="新密码">
                <img id="newEye1" onclick="newEyeShow()" src="/static/images/password-eye.png" style="cursor: pointer;" alt="">
                <img id="newEye2" onclick="newEyeShow()" src="/static/images/password-no-eye.png" style="display: none; cursor: pointer;" alt="">
            </div>

            <div class="inputBox">
                <input id="confirmPassword" type="password" placeholder="确认密码">
                <img id="confirmEye1" onclick="confirmEyeShow()" src="/static/images/password-eye.png" style="cursor: pointer;" alt="">
                <img id="confirmEye2" onclick="confirmEyeShow()" src="/static/images/password-no-eye.png" style="display: none; cursor: pointer;" alt="">
            </div>

            <div class="inputBox">
                <input type="text" id="captcha" placeholder="验证码">
                <div onclick="sendSMS(this)" class="rightText">获取验证码</div>
            </div>

            <button onclick="save()" class="btn">确定</button>
        </div>
        <script src="/static/js/common.js"></script>
        <script src="/static/js/jquery.min.js"></script>
        <script>
                    const choiceTab = (tab, index) => {
                        // 移除所有 Tab 的 tab-act 类
                        $('.tab').removeClass('tab-act');

                        // 给当前点击的 Tab 添加 tab-act 类
                        $(tab).addClass('tab-act');
                        $("#type").val(index);
                    }

                    const usedEyeShow = () => {
                        // 切换 img1 和 img2 的显示状态
                        $("#oldEye1").toggle();
                        $("#oldEye2").toggle();

                        // 修改 input 的 type 属性
                        let input = $("#oldPassword");
                        if (input.attr("type") === "password") {
                            input.attr("type", "text");
                        } else {
                            input.attr("type", "password");
                        }
                    }

                    const newEyeShow = () => {
                        // 切换 img1 和 img2 的显示状态
                        $("#newEye1").toggle();
                        $("#newEye2").toggle();

                        // 修改 input 的 type 属性
                        let input = $("#newPassword");
                        if (input.attr("type") === "password") {
                            input.attr("type", "text");
                        } else {
                            input.attr("type", "password");
                        }
                    }

                    const confirmEyeShow = () => {
                        // 切换 img1 和 img2 的显示状态
                        $("#confirmEye1").toggle();
                        $("#confirmEye2").toggle();

                        // 修改 input 的 type 属性
                        let input = $("#confirmPassword");
                        if (input.attr("type") === "password") {
                            input.attr("type", "text");
                        } else {
                            input.attr("type", "password");
                        }
                    }

                    function save() {
                        var type = $("#type").val();

                        var oldPassword = $("#oldPassword").val();
                        var newPassword = $("#newPassword").val();
                        var confirmPassword = $("#confirmPassword").val();
                        var captcha = $("#captcha").val();

                        $.post("{:url('index/user/changepwd')}", {"oldpassword": oldPassword, 'newpassword': newPassword, "renewpassword": confirmPassword, "captcha": captcha, "type": type}, function (ret) {
                            layer.msg(ret.msg, {icon: 1, time: 3000, shade: 0.4}, function () {
                                if (ret.code == 1) {
                                    location.reload();
                                }
                            });
                        });
                    }
                    var lock =0;
                    function sendSMS(that) {
                        let type = $("#type").val();
                        let event = 'changepwd';
                        let phone = "{$user['mobile']}";
                        if(lock==1){
                            return ;
                        }
                        lock =1;
                        $.post("{:url('api/sms/send')}", {"event": event, 'mobile': phone}, function (ret) {
                            layer.msg(ret.msg, {icon: 1, time: 3000, shade: 0.4}, function () {
                                if (ret.code == 1) {
//                                    location.reload();
                                    startCountdown($(that),60);
                                }
                            });
                        });
                    }
                    function startCountdown(element, seconds) {
                        if (seconds == 0) {
                            element.text('获取验证码');
                            lock =0;
                            return;
                        }
                        const interval = setInterval(() => {
                            if (seconds <= 0) {
                                clearInterval(interval); // 停止倒计时
                                element.text('获取验证码');
                                lock =0;
                            } else {
                                // 计算小时、分钟、秒
      
                                // 更新 DOM 内容
                                element.text(`${seconds}`);
                                seconds--;
                            }
                        }, 1000); // 每秒更新一次
                    }
        </script>
    </body>
</html>